<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form id="loginForm">
      <div>
        <!-- 绑定 label 的 for 到 input 的 id -->
        <!-- 在点击 label 的时候，聚焦 focus 到 input -->
        <label for="username">用户名</label>
        <!-- 要想让 formdata 拿到数据，必须给 input 加上 name 属性 -->
        <input name="username" placeholder="请输入用户名" id="username" />
      </div>
      <div>
        <label for="password">密码</label>
        <input name="password" placeholder="请输入密码" id="password" />
      </div>
      <button type="submit">登录</button>
    </form>
    <script>
      // 我们可以用 FormData 去获取表单项的值
      // 一次性取出表单项的值

      // submit preventDefault
      const loginForm = document.querySelector("#loginForm");
      loginForm.onsubmit = (e) => {
        console.log("submit");
        // 我们要发异步请求，不能让浏览器跳转
        e.preventDefault();
        // 表单提交的时候，发送登录信息到
        const xhr = new XMLHttpRequest();
        xhr.open("POST", "http://ajax-api.itheima.net/api/login");
        // 因为我们发送的是 post 请求，需要约定请求数据类型
        xhr.setRequestHeader("content-type", "application/json");
        // 如何获取表单的数据
        // FormData
        const formData = new FormData(loginForm);
        // 发送 json 数据
        xhr.send(
          JSON.stringify({
            username: formData.get("username"),
            password: formData.get("password"),
          })
        );
        // 监听结果
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              // 登录成功
              alert("登录成功");
            } else {
              // 登录失败
              alert("登录失败");
            }
          }
        };
      };
    </script>
  </body>
</html>
